<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root">

    </div>
</body>
<script src="../react.js"></script>
<script src="../react-dom.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">
    class App extends React.Component{
        state={
            provinceArray: [
                {
                    provinceName: "河南省",
                    cityList: [
                        {
                            cityName: "郑州市",
                            areaList: ["高新区", "中原区", "金水区", "二七区"]
                        }, {
                            cityName: "安阳市",
                            areaList: ["文峰区", "北关区", "开发区", "汤阴县", "安阳县"]
                        }, {
                            cityName: "新乡市",
                            areaList: ["红旗区", "原阳县", "新乡新区"]
                        }
                    ]
                },
                {
                    provinceName: "福建省",
                    cityList: [
                        {
                            cityName: "福州市",
                            areaList: ["滨海区", "吴岩区"]
                        }, {
                            cityName: "厦门市",
                            areaList: ["集美区", "翔安区", "思明区"]
                        }
                    ]
                }
            ],
            // 当前选择的省份所对应的索引
            provinceIndex:0,
            // 当前选择城市所对应的索引
            cityIndex:0,
            // 当前选择的区索引
            areaIndex:0
        }
        render(){
            let {provinceArray,provinceIndex,cityIndex,areaIndex} = this.state;
            return (
                <div>
                    {
                        // 渲染省份
                    }
                    <select onChange={(e)=>this.provinceChange(e)}>
                        {
                            provinceArray.map((item,index)=>{
                                return <option value={index} key={index}>{item.provinceName}</option>
                            })
                        }    
                    </select>
                    {
                        // 渲染省份所对应的城市
                    }
                    <select onChange={(e)=>this.cityChange(e)} value={cityIndex}>
                        {
                            provinceArray[provinceIndex].cityList.map((item,index)=>{
                                return <option value={index} key={index}>{item.cityName}</option>
                            })
                        }
                    </select>
                    <select value={areaIndex} onChange={(e)=>{
                        this.setState({
                            areaIndex:e.target.value
                        })
                    }}>
                          {
                            provinceArray[provinceIndex].cityList[cityIndex].areaList.map((item,index)=>{
                                return <option value={index} key={index}>{item}</option>
                            })
                          }
                    </select>
                </div>
            )
        }
        provinceChange(e){
            // console.log(e.target.value)
            // 获取当前选中省份所对应的索引
            let index = e.target.value;
            this.setState({
                provinceIndex:index,
                cityIndex:0
            })
        }
        cityChange(e){
            // 获取当前选中城市所对应的索引
            let index = e.target.value;
            this.setState({
                cityIndex:index,
                areaIndex:0
            })
        }
    }

    ReactDOM.render(<App/>,document.getElementById("root"))

</script>
</html>